<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .con{
            width: 400px;
            height: 400px;
            border: 2px solid red;
            border-radius: 50%;
            margin: 100px auto;
            outline: 1px solid black;
            position: relative;
        }
        @keyframes round {
            to {
                transform: rotate(360deg);
            }
        }
        .circle{
            width: 50px;
            height: 50px;
            background-color: rgb(101, 240, 136);
            border-radius: 50%;
            position: absolute;
            top:-25px;
            left: 175px;
            transform-origin: 25px 225px;
            animation: round 2s linear  infinite ;
        }
        /* .circle:hover{
            transform: rotate(360deg);
        } */
        .c2{
            animation-delay: -0.5s;
        }
        .c3{
            animation-delay: -1s;
        }
        .c4{
            animation-delay: -1.5s;
        }
        @keyframes loading-cr {
            25% {
                transform: translateY(-50px);
               
            }
            50%{
                transform: translateY(0px);
                
            }
            75%{
                opacity: 0.5;
            }
            100%{
                opacity: 1;
            }
        }
        .con2{
            width: 200px;
            height: 200px;
            outline: 1px solid black;
            margin: 100px auto;
            display: flex;
            align-items: center;
            justify-content: space-around;
            background-color: rgb(235, 235, 235);
        }
        .cr{
            width: 20px;
            height: 20px;
            background-color: rgb(124, 221, 224);
            border-radius: 50%;
            animation: loading-cr 1s cubic-bezier(0.17, 1.65, 0.86, 1.51)  infinite;
        }
        .cr2{
            animation-delay: 0.1s;
        }
        .cr3{
            animation-delay: 0.2s;
        }
        .cr4{
            animation-delay: 0.3s;
        }
        .cr5{
            animation-delay: 0.4s;
        }

    </style>
</head>
<body>
    <div class="con">
        <div class="circle c1">c1</div>
        <div class="circle c2">c2</div>
        <div class="circle c3">c3</div>
        <div class="circle c4">c4</div>
    </div> 
    <div class="con2">
        <div class="cr cr1"></div>
        <div class="cr cr2"></div>
        <div class="cr cr3"></div>
        <div class="cr cr4"></div>
        <div class="cr cr5"></div>
    </div>
</body>
</html>